<script setup lang="ts">
import HelloWorld from "@/components/HelloWorld.vue";
import { useMainStore } from "@/store/main";
import { NButton } from "naive-ui";
import { useMouse, useCounter } from "@vueuse/core";
const { x, y } = useMouse();
const { count, inc, dec } = useCounter();
const mainStore = useMainStore();
const updateName = () => {
  // $patch 修改 store 中的数据
  mainStore.$patch({
    name: "名称被修改了,nameLength也随之改变了",
  });
};

const updateName2 = () => {
  // action 修改 store 中的数据
  mainStore.insertPost("哈哈哈哈ß");
};
console.log(
  import.meta.env.VITE_APP_WEB_URL,
  "-----------VITE_APP_WEB_URL-----------"
);
</script>

<template>
  <div>{{ mainStore.name }} {{ mainStore.nameLength }}</div>
  <n-button @click="updateName">$patch修改state</n-button>
  <n-button @click="updateName2">action修改state</n-button>
  <img alt="Vue logo" src="@/assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  <h3>Mouse: {{ x }} x {{ y }}</h3>
  <h3>
    Counter: {{ count }}
    <n-button @click="inc()" type="primary">+</n-button>
    <n-button @click="dec()" type="info">-</n-button>
  </h3>
</template>

<style scoped lang="scss"></style>
